<template>
  <!-- 添加或修改角色配置对话框 -->
  <el-dialog :title="title" :visible.sync="openEidtView" width="650px">
    <el-form ref="recruitForm" :model="propRecruitFormData" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="入职者" prop="joberName">
            <el-input v-model="propRecruitFormData.joberName" placeholder="请输入姓名" style="width:100%"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="岗位" prop="technologyId">
            <el-select v-model="propRecruitFormData.technologyId" placeholder="请选择" style="width:100%">
              <el-option
                v-for="dict in typeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话" prop="jobberPhone">
            <el-input v-model="propRecruitFormData.jobberPhone" placeholder="请输入电话" style="width:100%"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="推荐评语" prop="recRemark">
            <el-input v-model="propRecruitFormData.recRemark" type="textarea" maxlength="500" show-word-limit placeholder="请输入推荐评语" style="width:100%"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="简历上传" prop="resumeUpload">
            <el-upload
              action="#"
              :show-file-list="true"
              :multiple="false"
              :limit="1"
              :file-list="fileList"
              :http-request="requestUploadFn"
              :before-upload="beforeUploadFn"
              :on-remove="uploadRemoveFn">
              <el-button size="small" :disabled="uploadDisabled">
                上传
                <i class="el-icon-upload el-icon--right"></i>
              </el-button>
              <div slot="tip" class="el-upload__tip">只能上传doc、docx文件<span v-show="uploadDisabled">，删除当前文件后才能重新上传！</span></div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitEditFormFn">确 定</el-button>
      <el-button @click="cancelEditFn">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { apiRequestAdd, apiRequestUpdate, apiUploadInterview } from "../../../../api/pmp/api.recruit";

  export default {
    name: 'recruitEdit', //编辑页面
    props: {
      title: {
        type: String,
        default: ""
      },
      id: {
        type: String,
        default: ""
      },
      propRecruitFormData: {
        type: Object,
        default: function(){
          return {
            id:undefined,
            joberName:"",
            technologyId:"1",
            jobberPhone:"",
            recRemark:"",
            vitaeUrl:""
          };
        }
      }
    },
    data () {
      var checkUpload = (rule, value, callback) => {
        if (this.uploadDisabled) {
          return callback();
        }
        return callback(new Error('请上传简历'));
      };
      return {
        // 弹出层标题
        openEidtView: false,
        //
        workTypeData: [],
        // 下拉框选中的项目
        workType: {},
        // 工时类型数据字典
        typeOptions: [],
        // 文件
        file: undefined,
        fileName: '',
        fileList: [],
        // 是否可用
        uploadDisabled: false,
        // 表单校验
        rules: {
          joberName: [
            { required: true, message: "入职者姓名不能为空", trigger: "blur" }
          ],
          technologyId: [
            { required: true, message: "岗位不能为空", trigger: "change" }
          ],
          jobberPhone: [
            { required: true, message: "电话不能为空", trigger: "blur" }
          ],
          recRemark: [
            { required: true, message: "推荐评语不能为空", trigger: "blur" }
          ],
          resumeUpload: [
            { validator: checkUpload, trigger: 'blur,change' }
          ]
        }
      };
    },
    watch: {
      propRecruitFormData (val) {
        if(val.vitaeUrl){
          console.log('watch', val);
          this.fileList=[{ name: val.joberName + '简历.doc', url: val.vitaeUrl }];
          this.uploadDisabled = true;
        }
      }
    },
    created() {
      this.apiGetDicts("technology_post_type").then(response => {
        this.typeOptions = response.data;
      });
    },
    methods: {
      // 覆盖默认的上传行为
      requestUploadFn() {
      },
      // 上传预处理
      beforeUploadFn(file) {
        if (file.type !== "application/msword" && file.type !== "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ) {
          this.msgError("文件格式错误，请上传doc、docx后缀的文件。");
          return false;
        } else {
          this.file = file;
          this.fileName = file.name;
          this.uploadDisabled = true;
          console.log('upload', file);
        }
      },
      // 删除上传列表处理
      uploadRemoveFn(){
        this.uploadDisabled = false;
      },
      // 上传
      uploadFn() {
        return new Promise((resolve, reject) =>{
          let formData = new FormData();
          formData.append("file",this.file);
          if(this.propRecruitFormData.id) formData.append('recruitId',this.propRecruitFormData.id);//传其他参数
          apiUploadInterview(formData).then(response => {
            if (response.code === 200) {
              resolve(response);
            } else {
              this.msgError(response.msg);
              reject();
            }
          });
        });

      },
      // 取消按钮
      cancelEditFn() {
        this.openEidtView = false;
        this.requestResetFn();
      },
      /** 提交按钮 */
      submitEditFormFn: function() {
        this.$refs["recruitForm"].validate(valid => {
          if (valid) {
            if(this.file){
              this.uploadFn().then((res) => {
                this.submitFn(res.url);
              });
            }else{
              this.submitFn();
            }
          }
        });
      },
      submitFn(vitaeUrl){
        let propRecruitFormData = { id:'' };
        propRecruitFormData = {...this.propRecruitFormData};
        if (vitaeUrl) propRecruitFormData.vitaeUrl = vitaeUrl;
        if (propRecruitFormData.id != undefined) {
          apiRequestUpdate(propRecruitFormData).then(response => {
            if (response.code === 200) {
              this.msgSuccess("修改成功");
              this.openEidtView = false;
              this.$parent.getListFn();
            } else {
              this.msgError(response.msg);
            }
          });
        } else {
          apiRequestAdd(propRecruitFormData).then(response => {
            if (response.code === 200) {
              this.msgSuccess("新增成功");
              this.openEidtView = false;
              this.$parent.getListFn();
            } else {
              this.msgError(response.msg);
            }
          });
        }
      },
      // 打开页面
      openDetail(){
        // 根据数据的状态属性，页面交互会发生变化
        this.openEidtView = true;
        const reader = new FileReader();
        reader.readAsDataURL(this.propRecruitFormData.vitaeUrl);
        reader.onload = () => {
          this.options.img = reader.result;
        };

      },
      // 表单重置
      requestResetFn() {
        this.fileList= [];
        this.uploadDisabled = false;
      },
      /** 下载 */
      handleDownLondFn() {
        var link = document.createElement('a');
        //设置下载的文件名
        link.download = this.propRecruitFormData.joberName;
        link.style.display = 'none';
        //设置下载路径
        link.href = this.propRecruitFormData.vitaeUrl;
        //触发点击
        document.body.appendChild(link);
        link.click();
        //移除节点
        document.body.removeChild(link);
      }

    }
  };
</script>
